<mat-list>
  <mat-list-item *ngFor="let property of properties">
    <div fxLayout="row" fxLayoutAlign="space-between center" class="property-item">
      <div>{{property.name}} <span class="property-type">({{property.relatedProjectDataModelName ? property.relatedProjectDataModelName + ' model' : property.dataType}} - {{property.isRequired ? 'required' : 'optional'}})</span></div>
      <div class="action-buttons" *appHasAccess="authorizePolicy.ProjectContributorAccess">
        <button mat-icon-button (click)="onPropertyInfoClick(property)">
          <mat-icon>info</mat-icon>
        </button>
        <button mat-icon-button (click)="onPropertyDeleteClick(property)">
          <mat-icon>delete</mat-icon>
        </button>
      </div>
    </div>
    <mat-divider></mat-divider>
  </mat-list-item>
</mat-list>
